<template>
  <div>
    <el-card slot="header">
      <span>设备</span>
      <div>
        <el-tree
          :data="deviceData"
          node-key="id"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
          @node-click="handleDeviceNodeClick"
          @node-drag-start="handleDragStart"
          draggable
          :allow-drop="allowDrop"
          :allow-drag="allowDeviceTreeDrag"
        >
          <span slot-scope="{ node, data }">
              <span>
                  <i :class="getDeviceTreeIcon(data)"></i>&nbsp;&nbsp;{{ node.label }}
              </span>              
          </span>
        </el-tree>
      </div>
    </el-card>
    <el-card slot="header">
      <span>量测</span>
      <div>
        <el-tree
          :data="analogData"
          node-key="id"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
          @node-drag-start="handleDragStart"
          draggable
          :allow-drop="allowDrop"
          :allow-drag="allowAnalogTreeDrag"
        >
          <span slot-scope="{ node, data }">
              <span>
                  <i :class="getAnalogTreeIcon(data)"></i>&nbsp;&nbsp;{{ node.label }}
              </span>              
          </span>
        </el-tree>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getDeviceTree, getAnalogTree } from '@/api/draw.js'

export default {
  name: 'ElecPropertyPanel',
  data() {
    return {
      deviceData: [],
      analogData: []
    }
  },
  mounted() {
    this.initDeviceTree()
  },
  methods: {
    initDeviceTree() {
      const self = this
      getDeviceTree().then(response => {
        self.deviceData = []
        self.deviceData.push(response.data)
      })
    },

    updateAnalogTree(deviceId) {
      const self = this
      getAnalogTree(deviceId).then(response => {
        self.analogData = []
        if (response.data) {
          self.analogData.push(response.data)
        }
      })
    },

    handleDeviceNodeClick(nodeData, node, deviceTree) {
      if (nodeData.properties.type && nodeData.properties.type === 'device') {
        this.updateAnalogTree(nodeData.properties.deviceId)
      }
    },

    getDeviceTreeIcon(nodeData) {
      const type = nodeData.properties.type
      if (!type) {
        return ''
      }
      let iconClass = ''
      switch (type) {
        case 'root':
          iconClass = 'el-icon-s-home'
          break
        case 'substation':
          iconClass = 'iconfont icon-substation'
          break
        case 'device':
          iconClass = 'iconfont icon-device'
          break
      }
      return iconClass
    },

    getAnalogTreeIcon(nodeData) {
      const type = nodeData.properties.type
      if (!type) {
        return ''
      }
      let iconClass = ''
      switch (type) {
        case 'root':
          iconClass = 'el-icon-s-home'
          break
        case 'analog':
          iconClass = 'iconfont icon-analog'
          break
      }
      return iconClass
    },

    handleDragStart(node, ev) {
      const dt = ev.dataTransfer
      ev.dataTransfer.effectAllowed = 'copy'
      dt.setData('text/plain', JSON.stringify(node.data))
    },

    allowDrop(draggingNode, dropNode, type) {
      return false
    },

    allowDeviceTreeDrag(draggingNode) {
      return draggingNode.data.properties.type && draggingNode.data.properties.type === 'device'
    },

    allowAnalogTreeDrag(draggingNode) {
      return draggingNode.data.properties.type && draggingNode.data.properties.type === 'analog'
    }
  }
}
</script>